直接進入正題:

1. 13-Slide in on Scroll

• 重點：eventListener('scroll',debounce(checkSlide)), debounce的概念
• 數學：
  • window.scrollY 滑動距離最上方的距離
  • window.innerHeight 畫面的高度
  • image.offsetTop image上緣距離最上方的距離

  function debounce(func, wait = 20, immediate = true) {
      var timeout;
      return function() {
        var context = this, args = arguments;
        var later = function() {
          timeout = null;
          if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
      };
    }

  const images = document.querySelectorAll('.slide-in')

  function checkSlide(e) {
      images.forEach(image => {
        const slideInAt = (window.scrollY + window.innerHeight)- image.height/2
        const imageBottom = image.offsetTop + image.height
        const isHalfShown = slideInAt > image.offsetTop
        const isNotScrollPass = window.scrollY < imageBottom
        if (isHalfShown && isNotScrollPass) {
          image.classList.add('active')
        }else {
          image.classList.remove('active')
        }
      })
  }

  window.addEventListener('scroll',debounce(checkSlide))

2. 14-Object , Array - Reference and Copy

• Strings, Numbers, Boolean by Copy
• Object, Array by Reference
• 重點：by Reference 要 Copy的方法
  • 1.Array
    • xxx.slice()
    • []concat(xxx)
    • [...xxx]
    • Array.from(xxx)
  • 2.Object
    • Object.assign({}, xxx , {"想修改的name:value"})
    • {...xxx} ES6尚未支援
    • 以上只能用到1層 nested的無效 會reference
      • Lodash有cloneDeep
      • hack : JSON.parse(JSON.stringify(xxx))
• 中文資料找到這一篇討論，晚上更新心得或是想法

    // start with strings, numbers and booleans
    //strings
    let name = 'frank'
    let name2 = name
    console.log(name, name2)  // 'frank', 'frank'
    name2 = 'frankfrank'
    console.log(name, name2) // 'frank', 'frankfrank'

    //numbers
    let a = 5
    let b = a
    console.log(a, b)  // 5, 5
    b = 10
    console.log(a, b) // 5, 10

    //boolean
    let delicious = true
    let remember = delicious
    console.log(delicious, remember)  // T, T
    remember = false
    console.log(delicious, remember) // T, T

    // Let's say we have an array
    const players = ['Wes', 'Sarah', 'Ryan', 'Poppy'];

    // and we want to make a copy of it.

    // You might think we can just do something like this:

    const players2 = players
    console.log(players, players2);  //same
    // however what happens when we update that array?
    players2[3] = 'Frank';
    console.log(players, players2);  // same with Frank

    // now here is the problem!
    // oh no - we have edited the original array too!
    // Why? It's because that is an array reference, not an array copy. They both point to the same array!
    // So, how do we fix this? We take a copy instead!
    const team = players2.slice()
    team[2]= 'frank'
    console.log(players,team);
    // one day
    // or create a new array and concat the old one in
    const team2 = [].concat(players)
    // or use the new ES6 Spread
    const team3 = [...players]
    // now when we update it, the original one isn't changed
    const team4 = Array.from(players)
    // The same thing goes for objects, let's say we have a person object
    const person = {
      name: 'frank',
      sex: 'male'
    }
    // with Objects is by reference
    const copyerror = person
    copyerror.age = '22'
    console.log(person, copyerror); //change reference
    // We will hopefully soon see the object ...spread
    // Things to note - this is only 1 level deep - both for Arrays and Objects. lodash has a cloneDeep method, but you should think twice before using it.
    //cloneDeep method